<template>
<div id="app">
    <div class="container">
        <div class="close"><span class="iconfont iconicon-test"></span></div>
        <div class="logo"><span class="iconfont iconnew"></span></div>
        <div class="inputs">
            <hmInput 
            ref="username"
            :reg="/^[1][3,4,5,7,8,9][0-9]{9}$/" 
            placeholder="请输入手机号码" 
            v-model="user.username"></hmInput>
            <hmInput ref="nickname" placeholder="请输入昵称" v-model="user.nickname"></hmInput>
            <hmInput type="password" ref="password" placeholder="请输入密码"
             v-model="user.password"
             ></hmInput>
        </div>
        <p class="tips">
            有账号？
            <a href="#/login" class="">去登录</a>
        </p>
        <!-- <div class="button">登录按钮</div> -->
        <van-button round block type="primary" @click="registerFn">注册</van-button>
    </div>
</div>
</template>

<script>
import hmInput from "../components/hmInput.vue"
import { register } from "@/api/user.js"
export default {
    components: { 
        hmInput
    },
    data(){
        return {
            user: {
                username: "13234545678", // 手机号码
                password: "", // 密码
                nickname: "",   // 昵称
            }
        }
    },
    methods: {
        // 注册
        registerFn(){
            // console.log(this.user);
            // 判断用户输入内容是否合法 isOk
            if(!this.$refs.username.isOk){
                this.$toast.fail("手机号码不正确！")
                return
            }
            if(!this.$refs.nickname.isOk){
                this.$toast.fail("昵称不能为空！");
                return
            }
            if(!this.$refs.password.isOk){
                this.$toast.fail("密码不能为空！")
                return
            }
            // 添加加载效果
            this.$toast.loading({
                message: "加载中...",
                duration: 0
            })
            // 调用注册接口函数实现注册功能
            // 传递给后端的参数属性名必须和接口文档上提供的一模一样
            register(this.user).then(res=>{
                // 判断是否注册成功
                if(res.data.message == "注册成功"){
                    // 跳转到登录页面
                    this.$router.push("/login");
                    // 关闭加载弹窗，toast：后一个弹窗会覆盖前一个弹窗的
                    // 因此有了this.$toast.success之后，就可以不需要this.$toast.clear()了
                    // this.$toast.clear();
                    this.$toast.success(res.data.message);
                }else{
                    this.$toast.fail(res.data.message);
                }
                // console.log(49,res);
            })
        }
    }
}
</script>

<style lang="less" scoped>
.container {
    padding: 20px;
}
.close {
    span {
        font-size: (27 / 360) * 100vw;
    }
}
.logo {
    display: flex;
    justify-content: center;

    span {
        display: block;
        font-size: (126 / 360) * 100vw;
        color: #d81e06;
    }
}
.inputs {
    input {
        margin-bottom: 20px;
    }
}
.tips {
    text-align: right;
    margin-bottom: 20px;
    a {
        color: #3385ff;
    }
}
</style>